<template>
  <el-card class="stats-card">
    <div class="card-header">
      <span>会议统计</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">本月会议次数</span>
      <span class="stat-value">{{ monthlyMeetings }}</span>
    </div>
    <div class="stat-item">
      <span class="stat-label">同意总人数</span>
      <span class="stat-value">{{ totalParticipants }}</span>
    </div>
  </el-card>
</template>

<script>
import { getMeetingCount, getMeetingPepopleCount } from '@/api/meeting'

export default {
  name: 'MeetingStatsCard',
  data () {
    return {
      // 组件独立统计数据
      monthlyMeetings: '',
      totalParticipants: ''
    }
  },
  created () {
    this.meetingCount()
    this.meetingPeopleCount()
  },
  methods: {
    meetingCount () {
      getMeetingCount().then(res => {
        this.monthlyMeetings = res.data
        if (this.monthlyMeetings === undefined) {
          this.monthlyMeetings = 0
        }
      })
    },
    meetingPeopleCount () {
      getMeetingPepopleCount().then(res => {
        this.totalParticipants = res.data
        if (this.totalParticipants === undefined) {
          this.totalParticipants = 0
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
/* 样式保持不变 */
.stats-card {
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #ebeef5;

  .card-header {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    padding: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;

    span {
      font-size: 18px;
    }
  }

  .stat-item {
    margin-bottom: 20px;

    .stat-label {
      font-size: 14px;
      color: #666;
      display: block;
      margin-bottom: 4px;
    }

    .stat-value {
      font-size: 24px;
      color: #333;
      font-weight: 800;
      transition: all 0.5s;
    }
  }
}
</style>
